import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入一级路由，第一种方式
import Index from '../pages/index'
// import Order from '../pages/order'
// import Detail from '../pages/detail'
// import Search from '../pages/search'
// import Login from '../pages/login'
// import Register from '../pages/register'
// import List from '../pages/list'
// 引入二级路由，第一种方式
// import Home from '../views/home'
// import Sort from '../views/sort'
// import Cart from '../views/cart'
// import usercenter from '../views/usercenter'

// 懒加载，不触发就不加载，放在路径渲染中方式一
// const usercenter = ()=> import ('../views/usercenter')

Vue.use(VueRouter)

// const routes=[

//     {
//       path:'/index',
//       component:Index,
//       children:[
//         {
//           path:'/home',
//           // 懒加载方式2
//           component:()=> import ('../views/home'),
//           // 路由元信息，使用方式head.vue
//           meta:{
//             title:'小u商城'
//           }
//         },{
//           path:'/sort',
//           component:()=> import ('../views/sort'),
//           meta:{
//             title:'分类'
//           }
//         },{
//           path:'/cart',
//           component:()=> import ('../views/cart'),
//           meta:{
//             title:'购物车'
//           }
//         },{
//           path:'/usercenter',
//           component:()=> import ('../views/usercenter'),
//           meta:{
//             title:'个人中心'
//           }
//         },
//       ]
//     },{
//       path:'/order',
//       component:()=> import ('../pages/order'),
//       // alias使用方式，usercenter。vue
//       name:'订单',
//       meta:{
//         title:'订单页'
//       }

//     },{
//       path:'/detail/:id',
//       component:()=> import ('../pages/detail'),
//       meta:{
//         title:'详情页'
//       }
//     },{
//       path:'/list',
//       component:()=> import ('../pages/list'),
//       meta:{
//         title:'列表'
//       }
//     },{
//       path:'/search',
//       component:()=> import ('../pages/search'),
//       meta:{
//         title:'搜索'
//       }
//     },{
//       path:'/login',
//       component:()=> import ('../pages/login'),
//       // alias可能会要求加一个别名，个人感觉就是可以多起一个名字，没什么用吧
//       alias:'/denglu',
//       meta:{
//         title:'登录页'
//       }
//     },
//     // {
//     //   path:'/register',
//     //   component:()=> import ('../pages/register'),
//     //   meta:{
//     //     title:'注册页'
//     //   }

    
//     // 命名师徒，多个出口，使用方式和alias差不多，用的不多，<router-view name="view1"></router-view>
//     {
//       path: "/register",
//       components:{
//         default:()=>import('../pages/register'),
//         // view1:()=>import('../pages/test.vue')
//       }
//     },
//     {
//       path:'*',
//       redirect:'/home'
//     }

  
// ]
const routes=[
  {
    path:'/index',
    component:Index,
    children:[
      {
        path:'/home',
        // 懒加载方式2
        component:()=> import ('../views/home'),
        // 路由元信息，使用方式head.vue
        meta:{
          title:'小u商城'
        }
      },{
        path:'/sort',
        component:()=> import ('../views/sort'),
        meta:{
          title:'分类'
        }
      },{
        path:'/cart',
        component:()=> import ('../views/cart'),
        meta:{
          title:'购物车'
        }
      },{
        path:'/usercenter',
        component:()=> import ('../views/usercenter'),
        meta:{
          title:'个人中心'
        }
      },
    ]
  },{
    path:'/order',
    component:()=> import ('../pages/order'),
    // alias使用方式，usercenter。vue
    name:'订单',
    meta:{
      title:'订单页'
    }

  },{
    path:'/detail/:id',
    component:()=> import ('../pages/detail'),
    meta:{
      title:''
    },
    // beforeEnter: (to, from, next) => {
    //   console.log(to,'路由独享');
    //   console.log(from,'路由独享从哪里来');
    //   // next()
    //   // 如果是从首页来的就可以进行下一步操作，否则回到首页
    //   if (from.path=='/home') {
    //     next()
    //   }else{
    //     next('/home')
    //   }
    // }
    
  },{
    path:'/list',
    component:()=> import ('../pages/list'),
    meta:{
      title:'列表'
    }
  },{
    path:'/search',
    component:()=> import ('../pages/search'),
    meta:{
      title:'搜索'
    }
  },{
    path:'/login',
    component:()=> import ('../pages/login'),
    // alias可能会要求加一个别名，个人感觉就是可以多起一个名字，没什么用吧
    alias:'/denglu',
    meta:{
      title:'登录页'
    }
  },{
    path:'/chatlogin',
    component:()=> import ('../pages/chatlogin'),

    meta:{
      title:'微信登录页'
    }
  },{
    path:'/pay',
    component:()=> import ('../pages/pay'),
    meta:{
      title:'确认订单'
    }
  },
  // {
  //   path:'/register',
  //   component:()=> import ('../pages/register'),
  //   meta:{
  //     title:'注册页'
  //   }

  
  // 命名师徒，多个出口，使用方式和alias差不多，用的不多，<router-view name="view1"></router-view>
  {
    path: "/register",
    components:{
      default:()=>import('../pages/register'),
      // view1:()=>import('../pages/test.vue')
    },
    meta:{
      title:'注册页'
    }
  },
  {
    path:'*',
    redirect:'/login'
  }

];
const router = new VueRouter({


  mode:'hash',
  routes,
  // 滚动行为,回到之前位置，常用
  scrollBehavior (to, from, savedPosition) {
    // 如果当前位置发生变化，保存当前位置
    if (savedPosition) {
      return savedPosition
    }else{
      return{
        savedPosition
      }
    }
  }

  
})
  // 全局登录拦截
router.beforeEach((to,from,next)=>{
  // 如果用户去登录页
    if (to.path=='/login') {
      next()
      return
    }
    // 如果用户登录了，就允许下一步
    if(sessionStorage.getItem('isLogin')){
      next()
      return
    }
    // 如果以上条件否不符合，就去登录
    next('./home')
})
router.afterEach((to, from) => {
  // 用得少
})

export default router
